﻿@using OASystem.Model;
@using OASystem.Controllers;
@{
    List<Departinfo> Departinfo1 = ViewBag.one as List<Departinfo>;
    List<Departinfo> Departinfo2 = ViewBag.two as List<Departinfo>;
}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="~/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="~/js/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="~/css/base.css" />
    <link rel="stylesheet" type="text/css" href="~/css/info-mgt.css" />
    <link rel="stylesheet" href="~/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="~/css/jquery.treetable.css" />
    <link rel="stylesheet" href="~/css/jquery.treetable.theme.default.css" />
    <link rel="stylesheet" href="~/css/base.css" />
    <link rel="stylesheet" href="~/css/info-mgt.css" />
    <link rel="stylesheet" href="~/layui/css/layui.css" media="all">
    <style>
        .tree_left {
            box-sizing: border-box;
            overflow-y: auto;
            width: 19%;
            border: 1px #c1d3de solid;
            margin-right: 1%;
            border-top: none;
        }

            .tree_left h6, .tree_right h6 {
                line-height: 30px;
                font-weight: bold;
                padding-left: 6px;
                color: #000;
                font-size: 14px
            }

        .tree_left_top {
            margin: 6px;
            height: 780px;
        }

        .tree_input input {
            border: 1px #ccc solid;
            margin: 3px 0 0 10px;
            border-radius: 4px;
        }

        .layui-layer-title {
            background: url(images/righttitlebig.png) repeat-x;
            font-weight: bold;
            color: #46647e;
            border: 1px solid #c1d3de;
            height: 33px;
            line-height: 33px;
        }

        .tabe_bot label {
            width: 70px;
            text-align: right;
            font-size: 14px;
            font-weight: 900;
            color: #46647e
        }

        .l_left {
            float: left
        }

        .tabe_bot input, .tabe_bot select {
            width: 180px;
            height: 30px;
            border-radius: 6px;
            margin: 0 20px 0 0;
            border: none;
            border: 1px #ccc solid
        }

        .tabe_btn {
            width: 60px;
            height: 30px;
            background-color: #68b86c;
            border: none;
            border-radius: 6px;
            color: #fff
        }

        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #99c9db;
            text-align: left;
            padding: 2px;
            z-index: 999
        }

            div#rMenu ul li {
                margin: 1px 0;
                padding: 5px 15px;
                cursor: pointer;
                list-style: none outside none;
                background-color: #5a8cc4;
                color: #fff
            }

                div#rMenu ul li:hover {
                    color: #000;
                    background-color: #ccc
                }

        #rMenu ul {
            margin: 0;
            padding: 0
        }

        .ztree_add_div {
            width: 200px;
            height: 100px;
            border: 1px solid #cccccc;
            padding-top: 10px;
            padding-bottom: 10px;
            display: none;
        }

        .drop {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            background-color: #68b86c;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .update {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            background-color: #68b86c;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .table-operate a {
            width: 74px;
        }

        .ztree_add_div p {
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .bot_btn .btn {
            width: 40px;
            height: 24px;
            background-color: #68b86c;
            border: none;
            border-radius: 6px;
            color: #fff;
            margin-right: 15px;
        }

        .bot_btn .btn1 {
            background-color: #c1d3de;
            border: none;
            border-radius: 6px;
            color: #000;
            margin-right: 0
        }

        .bot_btn {
            width: 100%;
            height: 30px;
            font-size: 13px;
            text-align: center;
        }

        tr td {
            font-size: 17px;
            text-align: right;
            font-family: Arial;
            font-style: italic;
            text-align: center;
        }
    </style>

    <script src="~/js/jquery.js"></script>
    <script src="~/layui/layui.js" charset="utf-8"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>
        function change() {
            var height01 = $(window).height();
            $(".tree_left").css('height', height01 - 35 + "px");
        }
    </script>
    <title>通讯录管理</title>
</head>

<body>
    <div class="title"><h2>通讯录管理</h2></div>
    <div class="tree_left l_left">
        <h6>部门列表</h6>
        <div class="tree_left_top">
            <div class=" order_ztree l_left organize_ztree" style="width: 100%">
                <p><ul id="treeDemo" class="ztree" style=" overflow:auto;margin-left: 20px"></ul></p>
            </div>
            <div id="rMenu">
                <ul>
                    <li id="m_add" onclick="openlayer5()">增加节点</li>
                    <li id="m_del" onclick="removetreenode() ">删除节点</li>
                    <!--<li id="m_check" onclick="checkTreeNode(true)">Check节点</li>-->
                    <!--<li id="m_unCheck" onclick="checkTreeNode(false)">unCheck节点</li>-->
                    <!--<li id="m_reset" onclick="resetTree()">恢复zTree</li>-->

                </ul>
                <div class="ztree_add_div " id="dialog-confirm">

                    <p><label>名称：</label><input type="text" /></p>
                    <p class="bot_btn">
                        <button class="btn" id="tree_add" onclick="addTreeNode()">保存</button>
                        <button class="btn btn1" id="cancer">取消</button>
                    </p>
                </div>
            </div>
            <div class="clear">


                <table>
                    @for (int i = 0; i < Departinfo1.Count; i++)
                    {
                        <tr data-tt-id="@Departinfo1[i].DepartId">

                            <td class="fd"><span class="folder"></span>@Departinfo1[i].DepartName</td>
                            <td id="@Departinfo1[i].DepartId"></td>

                        </tr>
                        if (Departinfo2 != null)
                        {
                            for (int j = 0; j < Departinfo2.Count; j++)
                            {
                                if (Departinfo2[j].DepartFatherId == Departinfo1[i].DepartId)
                                {
                                    <tr data-tt-id="@Departinfo1[i].DepartId+'-'@Departinfo2[j]" data-tt-parent-id="1" id="123">

                                        <td class="fd"><span class="file"></span>@Departinfo2[j].DepartName</td>
                                        <td id="@Departinfo2[j].DepartId"></td>

                                    </tr>
                                }

                            }

                        }
                    }
                </table>
            </div>

        </div>

    </div>

    <div class="l_left" style="width: 80%">
        <div class="query">
            <div class="tabe_bot">
                <div class="list_left">
                    <label style="float: left">拼音：</label><ul class="list_ul" id="pinyin">
                        <li id="namea">A</li>
                        <li id="nameb">B</li>
                        <li id="namec">C</li>
                        <li id="named">D</li>
                        <li id="namee">E</li>
                        <li id="namef">F</li>
                        <li id="nameg">G</li>
                        <li id="nameh">H</li>
                        <li id="namei">I</li>
                        <li id="namej">J</li>
                        <li id="namek">K</li>
                        <li id="namem">M</li>
                        <li id="namel">L</li>
                        <li id="namen">N</li>
                        <li id="nameo">O</li>
                        <li id="namep">P</li>
                        <li id="nameq">Q</li>
                        <li id="namer">R</li>
                        <li id="names">S</li>
                        <li id="namet">T</li>
                        <li id="nameu">U</li>
                        <li id="namev">V</li>
                        <li id="namew">W</li>
                        <li id="namex">X</li>
                        <li id="namey">Y</li>
                        <li id="namez">Z</li>

                    </ul>
                </div>

                <div class="clear"></div>
            </div>
        </div>
        <div class="table-operate ue-clear">
            <a href="/Home/MailList_tail" class="add">添加联系</a>
            <a href="javascript:;" class="del" id="checkbtn">批量删除</a>
        </div>
        <div class="table-box">
            <table class="layui-hide" id="test" lay-filter="test"></table>
            <script type="text/html" id="barDemo">
                <a class="update" lay-event="edit">编辑</a>
                <a class="drop" lay-event="del">删除</a>
            </script>
        </div>
        <div class="pagination ue-clear"></div>
    </div>
</body>
<script type="text/javascript" src="~/js/jquery.js"></script>
<script type="text/javascript" src="~/js/demo/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="~/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="~/js/jquery.ztree.exedit-3.5.js"></script>
<script src="~/js/layer_v2.1/layer/layer.js"></script>
<script src="~/layui/layui.js" charset="utf-8"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/bootstrap-table.js"></script>
<script type="text/javascript" src="~/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="~/js/date/js/laydate.js"></script>
<script type="text/javascript" src="~/js/artDialog/jquery.artDialog.source.js?skin=default"></script>
<script type="text/javascript" src="~/js/artDialog/plugins/iframeTools.js"></script>


</html>
<script>
    /*  !function () {
          laydate.skin('danlan');//切换皮肤，请查看skins下面皮肤库
          laydate({ elem: '#demo' });
          laydate({ elem: '#demo1' });//绑定元素
      }();*/
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/MailList/MaiPageList'
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            }]
            , title: '用户数据表'
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'Id', title: 'ID', width: 150, fixed: 'left', unresize: true, sort: true }
                , { field: 'Name', title: '姓名', width: 200 }
                , { field: 'PosId', title: '职位Id', width: 150 }
                , { field: 'DepartId', title: '部门Id', width: 150 }
                , { field: 'Tel', title: '电话号码', width: 150 }
                , { field: 'Email', title: '邮箱', width: 200 }
                , { field: 'Pinyin', title: '拼音', width: 200 }
                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250 }
            ]]
            , page: true
            , id: 'testReload'
        });
        $("#checkbtn").click(function () {
            //获取复选框集合数据
            var checkStatus = table.checkStatus('testReload');
            var data = checkStatus.data;
            //获得where限制条件Id
            var codeId = "";
            if (data.length == 0) {
                layer.msg('请选择一行', {
                    title: '提示框',
                    icon: 0,
                    time: 2000

                });
                return;
            };
            //遍历集合,拼接字符串
            for (var i in data) {
                if (i == data.length - 1) {
                    codeId += data[i].Id
                } else {
                    codeId += data[i].Id + ",";
                }
            };
            //温馨提示是否要删除
            $.ajax({
                url: "/MailList/MoreDel?id=" + codeId,
                type: "post",
                success: function (result) {
                    if (result.success) {
                        layer.msg('批量删除成功!', { icon: 6, time: 1000 });
                        location.reload();//刷新页面
                    } else {
                        layer.msg('批量删除失败!', { icon: 6, time: 1000 });
                    }
                }
            })
        })
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            var id = data.Id;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: "post",
                        url: "/MailList/MailDel",
                        data: data,
                        success: function (responseResult) {
                            if (responseResult.success) {
                                layer.msg('删除成功!', { icon: 6, time: 1000 });
                                obj.del();
                                layer.close(index);
                                window.location.reload();//刷新页面
                            } else {
                                layer.msg('删除失败!', { icon: 6, time: 1000 });
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                var Id = data.Id;
                $.ajax({
                    type: "post",
                    url: "/MailList/Update?id=" + Id,
                    success: function (responseResult) {
                        if (responseResult.success) {
                            window.location.href = "/Home/MailList_update";
                        } else {
                            layer.msg('编辑失败!', { icon: 6, time: 1000 });
                        }
                    }
                })
            }

        });
    })

    //列表刷新
    function TableReload() {
        var table = layui.table;
        //获取页面管理员名称和时间
        var obj_lis = document.getElementById("pinyin").getElementsByTagName("li");
        for (i = 0; i < obj_lis.length; i++) {
            obj_lis[i].onclick = function () {
                var username = this.innerHTML;
                //上述方法等价于
                table.reload('testReload', {
                    where: { //设定异步数据接口的额外参数，任意设
                        username: username,
                    }
                });
            }
        }
    };
    //根据字母查询点击事件
    $("li").click(function () {
        TableReload();
    });
    //列表刷新
    function Check(id) {
        var table = layui.table;
        //获取页面管理员名称和时间
        var departid = id;
        //上述方法等价于
        table.reload('testReload', {
            where: { //设定异步数据接口的额外参数，任意设
                departid: departid,
            }
        })
    };
    //根据部门ID查询点击事件
    $(".fd").click(function () {
        Check($(this).next().attr("id"));
    });
</script>
